<template>

  <el-card>
    <el-row>

      <el-col :span="12">
        <div class="birthdayHum">
          <span>今日计划数</span>
        </div>
        <div class="birthdayNum" @click="openPath('/toPlanTodayList')">
          <!--<span style="color:#F76707">{{statistical.today}}</span>-->
          <span :class="{blink: statistical.today !== 0}" style="color:#30A9DE" >{{statistical.today}}</span>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="birthdayHum">
          <span>已逾期数</span>
        </div>
        <div class="birthdayNum" @click="openPath('/toPlanOverdueList')">
          <!--<span style="color:#36B64B">{{statistical.overdue}}</span>-->
          <span :class="{blink: statistical.overdue !== 0}" style="color:#E53A40" >{{statistical.overdue}}</span>
        </div>
      </el-col>

    </el-row>
  </el-card>

</template>

<script>
  import http from '@/utils/http'

  export default {
    // 计划统计信息
    name: "PlanStatistics",
    data(){
      return {
        // 统计数据
        statistical: {
          today: 0,
          overdue: 0,
          tool: 0,
          completed: 0,
          stop: 0,
        },
      }
    },
    methods: {
      /**
       * 跳转到指定的路由
       * @param url 跳转的地址
       */
      openPath(url){
        this.$router.push({path: url})
      },
      /**
       * 统计任务数据
       */
      getPlanStatisticalQuantity(){
        http.post("/plan/getPlanStatisticalQuantity", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.statistical = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getPlanStatisticalQuantity()
    }
  }
</script>

<style scoped>

  .birthdayHum {
    margin: 5px;
    font-weight: 400;
    font-size: 14px;
    color: #909399;
    text-align: center
  }

  .birthdayNum {
    /*margin: 5px;*/
    font-weight: 700;
    font-size: 23px;
    /*color: #909399;*/
    text-align: center;
    cursor:pointer;
  }

  .birthdayNumHum {
    /*margin: 5px;*/
    /*font-weight: 700;*/
    font-size: 14px;
    /*color: #909399;*/
    /*text-align: center*/
  }


  /*闪烁数字*/
  @keyframes blink{
    /*开始时opacity为0(透明)，动画结束时opacity为1(不透明) 作者：让你三行代码 https://www.bilibili.com/read/cv13486217/ 出处：bilibili*/
    0%{opacity: 1;}
    50%{opacity: 1;}
    50.01%{opacity: 0;}
    100%{opacity: 0;}
  }
  .blink{
    /*animation: blink 1.5s linear infinite;*/
    animation: blink 1s linear infinite;
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
  }

</style>
